<template>
	<view class="">
		<u-navbar title="专利详情" @leftClick="leftClick" :autoback="true"></u-navbar>
		<view class="flex-col page">
		  <view class="flex-col group_3">
		    <view class="flex-row space-x-11 section_3">
		      <image
		        class="image_7"
		        src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/632afc43e391320011695f3b/16647938120003184048.png"
		      />
		      <text class="font_2 text_5">您可免费添加10条专利进行监管</text>
		    </view>
		    <view class="flex-col space-y-423 section_4">
		      <view class="flex-col group_4">
		        <view class="flex-row space-x-9 group_5">
		          <text class="text_6">添加专利</text>
		          <text class="font_2 text_7">输入专利号，多个专利号时，用英文“,”隔开。</text>
		        </view>
				<u--textarea height="255" maxlength="-1" v-model="content" placeholder="格式如右所示：2020231558246,2021300581706" confirmType="done"></u--textarea>
		      </view>
		      <view class="flex-col items-center button"><text class="text_8" @click="sureAdd">确定添加</text></view>
			  <u-popup :show="rightPop" mode="center"  @close="handleBtn">
			  	<pop @handleBtn="handleBtn"></pop>
			  </u-popup>
		    </view>
		  </view>
		</view>
	</view>
</template>

<script>
	import {addPatent} from '@/api/index.js'
	import pop from './addpop.vue';
	export default {
		components:{pop},
		data() {
			return {
				content:'',
				rightPop:false,
			};
		},
		onLoad(option) {
			
		},
		methods:{
			leftClick(){
				if (getCurrentPages().length > 1) {
					uni.navigateTo({
						url: `../supervise/supervise`
					});
				} else {
					uni.switchTab({
						url: '../../pages/index/index'
					})
				}
			},
			
			sureAdd(){
				let contents = this.content.split(',');
				if(contents?.length > 10)  {
					this.$u.toast('亲，最多只能添加10个专利监管哦！');
					return;
				}
				
				addPatent({patentNos:this.content}).then(res => {
					if(res.code === 200) {
						this.$u.toast(res.msg || '操作结束');
					}else if(res.code === 601) {
						this.rightPop = true;
					}else {
						this.$u.toast(res.msg);
					}
				})
			},
			handleBtn(){
				this.rightPop = false;
			},
		}
	}
</script>

<style lang="scss" scoped>
.page {
  background-color: #f4f6f8;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  .group_3 {
    flex: 1 1 auto;
    overflow-y: auto;
    .space-x-11 {
      & > view:not(:first-child),
      & > text:not(:first-child),
      & > image:not(:first-child) {
        margin-left: 11rpx;
      }
      .image_7 {
        margin-bottom: 3rpx;
        width: 22rpx;
        height: 22rpx;
      }
      .text_5 {
        color: #ec8e00;
      }
    }
    .section_3 {
      padding: 30rpx 30rpx 26rpx;
      background-color: #fdf6ec;
    }
    .space-y-423 {
      & > view:not(:first-child),
      & > text:not(:first-child),
      & > image:not(:first-child) {
        margin-top: 423rpx;
      }
      .group_4 {
        padding: 0 30rpx;
        .space-x-9 {
          & > view:not(:first-child),
          & > text:not(:first-child),
          & > image:not(:first-child) {
            margin-left: 9rpx;
          }
          .text_6 {
            color: #333333;
            font-size: 30rpx;
            font-family: Microsoft YaHei;
            line-height: 29rpx;
          }
          .text_7 {
            margin-top: 7rpx;
            color: #999999;
            font-weight: 300;
          }
        }
        .group_5 {
          padding-bottom: 20rpx;
        }
      }
      .button {
		position: fixed;
		width: 100%;
		bottom: 0;
        padding: 26rpx 0 28rpx;
        background-color: #5677fc;
        box-shadow: 0px -5rpx 7rpx #00000026;
        .text_8 {
          color: #ffffff;
          font-size: 34rpx;
          font-family: Microsoft YaHei;
          line-height: 34rpx;
        }
      }
    }
    .section_4 {
      padding-top: 34rpx;
      background-color: #ffffff;
    }
    .font_2 {
      font-size: 24rpx;
      font-family: Microsoft YaHei;
      line-height: 24rpx;
    }
  }
}
</style>